import React from 'react'
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style'
import Topic from './components/Topic'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import List from './components/List'
import { actionCreator } from './store'
import { connect } from 'react-redux'

class Home extends React.PureComponent {
  componentWillUnmount () {
    const { changeScrollTopShow } = this.props
    window.removeEventListener('scroll', changeScrollTopShow)
  }
  handleScrollTop () {
    window.scrollTo(0, 0, 3000)
  }
  componentDidMount () {
    const { changeScrollTopShow } = this.props
    this.props.getHomeInfo(this.props.page)
    window.addEventListener('scroll', changeScrollTopShow)
  }
  render () {
    const { showScroll } = this.props
    return (
      <HomeWrapper>
        <HomeLeft>
          <img
            className="banner-img"
            src="https://aecpm.alicdn.com/imgextra/i4/353930884/O1CN01Q3f1KD1IOujltIZuZ_!!353930884-0-alimamacc.jpg"
          />
          <Topic></Topic>
          <List></List>
        </HomeLeft>
        <HomeRight>
          <Recommend></Recommend>
          <Writer></Writer>
        </HomeRight>
        {/* 回到顶部 */}
        {
          showScroll ? 
          <BackTop onClick={() => this.handleScrollTop()}>回到<br />顶部</BackTop>
          :
          null
        }
        
      </HomeWrapper>
    )
  }
}
const mapStateToProps = (state) => ({
  page: state.getIn(['home', 'page']),
  showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = (dispatch) => ({
  getHomeInfo(page) {
    const action = actionCreator.getHomeData({ page })
    dispatch(action)
  },
  changeScrollTopShow () {
    let { scrollTop } = document.documentElement
    dispatch(actionCreator.changeScrollShow(scrollTop>400))
  }
})

export default connect(mapStateToProps, mapDispatch)(Home)